<template>
  <el-card class="user-container">
    <template #header>
      <div class="header">
        <span>花卉后台管理系统</span>
      </div>
    </template>
    <div class="user-profile">
      <!-- 头像 -->
      <div class="box-center">
        <!--   :image="$store.getters.userInfo.avatar" -->
        <pan-thumb
          image="https://s1.imagehub.cc/images/2023/02/23/82294702d5f85bd5687395d98b64f6ac.jpeg"
          :height="'100px'"
          :width="'100px'"
          :hoverable="false"
        >
          <div>Hello</div>
          {{ $store.getters.userInfo.title }}
        </pan-thumb>
      </div>
      <!-- 姓名 && 角色 -->
      <div class="box-center">
        <div class="user-name text-center">
          {{ $store.getters.userInfo.name }}
        </div>
        <div class="user-role text-center text-muted">
          {{ $store.getters.userInfo.title }}
        </div>
      </div>
    </div>
    <!-- 简介 -->
    <div class="project-bio">
      <!-- 系统介绍 -->
      <div class="project-bio-section">
        <div class="project-bio-section-header">
          <svg-icon icon="introduce" />
          <span>系统介绍</span>
        </div>
        <div class="project-bio-section-body">
          <div class="text-muted">
            该后台管理系统与花卉商城系统进行配套，可以用于鲜花信息/种类的管理，商品订单的管理等多种功能，能够最大程度的帮助您以最小的人力完成最多的事情。
          </div>
        </div>
      </div>
      <!-- 项目功能 -->
      <div class="project-bio-section">
        <div class="project-bio-section-header">
          <svg-icon icon="reward" />
          <span>部分功能介绍</span>
        </div>
        <div class="project-bio-section-body">
          <div class="progress-item" v-for="item in featureData" :key="item.name">
            <div>{{ `${item.name}:${item.introduce}` }}</div>
          </div>
        <div class="summarize">以上方几个模块进行举例，其他模块大同小异，希望您早日对系统进行熟悉，一定能帮助您的效率事半功倍</div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import PanThumb from '@/components/PanThumb'
import { defineProps,ref } from 'vue'
// 部分功能介绍
const featureData = ref([
  {
    name:'鲜花信息',
    introduce:"可以对店铺中的鲜花进行增删改查的操作。"
  },
  {
    name:'鲜花种类',
    introduce:"店铺中鲜花种类的合计，可以对特定种类进行删除。若删除该种类，则该种类中所有鲜花信息都会被删除"
  },
  {
    name:'商品订单',
    introduce:"商品订单栏目中分为：未发货，已发货，已完成订单。可以对t特定订单的种类进行修改。"
  },
])
</script>

<style lang="scss" scoped>
.user-container {
  .user-profile {
    text-align: center;
    .user-name {
      font-weight: bold;
    }

    .box-center {
      padding-top: 10px;
    }

    .user-role {
      padding-top: 10px;
      font-weight: 400;
    }
  }
  .text-muted {
    font-size: 14px;
    color: #777;
  }
  .project-bio {
    margin-top: 20px;
    color: #606266;
    span {
      padding-left: 4px;
    }
    .project-bio-section {
      margin-bottom: 36px;
      .project-bio-section-header {
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-weight: bold;
      }
      .project-bio-section-body {
        .progress-item {
          margin-top: 10px;
          div {
            font-size: 14px;
            margin-bottom: 2px;
          }
        }
        .summarize{
          margin-top: 10px;
          font-size: 15px;
          font-weight: 700;
        }
      }
    }
  }
}
</style>
